<!--
 * @Description  : 
 * @Author       : jiangxiaoying
 * @Date         : 2021-03-09 13:23:57
 * @LastEditTime : 2021-03-16 14:29:22
 * @LastEditors  : jiangxiaoying
 * @FilePath     : \cloud-components\docs\pages\components\cloud-tag\example4.vue
-->
<template>
  <div class="tag-example">
    <CloudRow style="margin-bottom: 16px">
      <CloudCol :span="2"> checked: </CloudCol>
      <CloudCol>
        <CloudCheckableTag :checked="checked0" @change="handleChange0">tag1</CloudCheckableTag>
      </CloudCol>
    </CloudRow>
    <CloudRow>
      <CloudCol :span="2"> v-model: </CloudCol>
      <CloudCol>
        <CloudCheckableTag v-model="checked1" @change="handleChange1">tag1</CloudCheckableTag>
        <CloudCheckableTag v-model="checked2" @change="handleChange1">tag2</CloudCheckableTag>
        <CloudCheckableTag v-model="checked3" @change="handleChange1">tag3</CloudCheckableTag>
      </CloudCol>
    </CloudRow>
  </div>
</template>

<script>
  export default {
    title: '4.可选择',
    subTitle: '可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。',
    data () {
      return {
        checked0: false,
        checked1: true,
        checked2: false,
        checked3: false
      }
    },
    methods: {
      handleChange0 (checked) {
        console.log(checked);
        console.log(this.checked1);
      },
      handleChange1 (checked) {
        console.log(checked);
        console.log(this.checked1);
      }
    }
  }
</script>

<style lang="scss">
  .tag-example {
    font-size: 12px;
  }
</style>